<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width,user-scalable=yes"/>
        <meta name="Keywords" content="shop"/>
        <meta name="Description" content="shop"/>

        <link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
        <link rel="stylesheet" type="text/css" href="css/common.css"/>
        <link rel="stylesheet" type="text/css" href="css/index.css"/>
        <link rel="stylesheet" type="text/css" href="css/classify.css"/>
        <link rel="stylesheet" type="text/css" href="css/discover.css"/>
        <link rel="stylesheet" type="text/css" href="css/personal.css"/>
        <link rel="stylesheet" type="text/css" href="css/details.css"/>

        <title>首页</title>
    </head>

    <body>
        <div class="web" id="web">
            <keep-alive>
                <component :is="curPage">
                    <!-- logo -->
                    <div class="header_left fl" slot="logo">
                        <a href="">
                            <img src="img/logo.png"/>
                        </a>
                    </div>

                    <!-- 下拉框 -->
                    <div class="header_right fr" slot="local_box">
                        <select name="">
                            <option value="">广州市</option>
                            <option value="">深圳市</option>
                            <option value="">珠海市</option>
                        </select>
                    </div>
                    <!-- 搜索框 -->
                    <div class="header_center" slot="search">
                        <form action="" method="post">
                            <input type="text" class="main" placeholder="请输入商品名称"/>
                            <button>
                                <i class="iconfont icon-sousuokuang search"></i>
                            </button>
                            <div class="icon-holder">
                                <div class="icon" id="food">
                                    吃
                                </div>
                                <div class="icon" id="movie">
                                    看
                                </div>
                                <div class="icon" id="eat">
                                    玩
                                </div>
                                <div class="icon" id="coffee">
                                    喝
                                </div>
                                <div class="icon" id="misc">
                                    听
                                </div>
                            </div>
                        </form>
                    </div>

                    <!-- 返回 -->
                    <div class="csf_header_left fl" slot="back">
                        <button>Back</button>
                    </div>

                    <!-- 更多按钮 -->
                    <div class="more fr" slot="more_things" slot-scope="prop" @click="change_page('detail_page','更多')">
                        <a>更多<i class="iconfont icon-youjiantouyuan-copy toright"></i>
                        </a>
                    </div>
                </component>
            </keep-alive>

            <!--尾部S-->
            <footer>
                <ul class="clear_fix">
                    <li class="fl" @click="change_page('home','首页')">
                        <a >
                            <i class="iconfont icon-home1 my_icon"></i>
                            <p>首页</p>
                        </a>
                    </li>
                    <li class="fl" @click="change_page('classify','分类')">
                        <a >
                            <i class="iconfont icon-leimupinleifenleileibie-- my_icon"></i>
                            <p>分类</p>
                        </a>
                    </li>
                    <li class="fl" @click="change_page('discover','发现')">
                        <a >
                            <i class="iconfont icon-xuyaodaosvg1zhuanhuan my_icon"></i>
                            <p>发现</p>
                        </a>
                    </li>
                    <li class="fl" @click="change_page('personal','我的')">
                        <a >
                            <i class="iconfont icon-wode1 my_icon"></i>
                            <p>我的</p>
                        </a>
                    </li>
                </ul>
            </footer>
            <!--尾部E-->

        </div>

        <!-- 首页模板 -->
        <template id="home">
            <div>
                <!--头部S-->
                <header class="clear_fix">
                    <slot name="logo"></slot>
                    <slot name="local_box"></slot>
                    <slot name="search"></slot>
                </header>
                <!--头部E-->
                <!--中心内容S-->
                <section>
                    <div class="kv">
                        <img src="img/index/banner.jpg"/>
                    </div>
                    <div class="banner clear_fix">
                        <slot name="more_things"></slot>
                        <i class="iconfont icon-wubanhua banner_hua"></i>
                        <span>优惠团购</span>
                    </div>

                    <div class="sale_box">
                        <div class="sale sale_line1 clear_fix">
                            <div class="sale_right fr"><img src="img/index/discounts2.jpg"/></div>
                            <div class="sale_left"><img src="img/index/discounts1.jpg"/></div>
                        </div>
                        <div class="sale clear_fix">
                            <div class="sale_right fr"><img src="img/index/discounts4.jpg"/></div>
                            <div class="sale_left"><img src="img/index/discounts3.jpg"/></div>
                        </div>
                    </div>

                    <div class="banner clear_fix">
                        <slot name="more_things"></slot>
                        <i class="iconfont icon-xin banner_hua"></i>
                        <span>猜你喜欢</span>
                    </div>

                    <div class="meals">
                        <div class="meal1 clear_fix">
                            <div class="meal_left fl"><img src="img/index/shop_wansui.jpg"/></div>
                            <div class="meal_right fr">
                                <p>&lt;100m</p>
                                <p>已售1000</p>
                            </div>
                            <div class="meal_center">
                                <p>万岁寿司(正佳店)</p>
                                <p>[100店通用]<span>双人套餐</span></p>
                                <p>￥<span>88.00</span></p>
                            </div>
                        </div>
                        <div class="meal1 clear_fix">
                            <div class="meal_left fl"><img src="img/index/shop_wansui.jpg"/></div>
                            <div class="meal_right fr">
                                <p>&lt;100m</p>
                                <p>已售1000</p>
                            </div>
                            <div class="meal_center">
                                <p>万岁寿司(正佳店)</p>
                                <p>[100店通用]<span>双人套餐</span></p>
                                <p>￥<span>88.00</span></p>
                            </div>
                        </div>
                    </div>
                </section>
                <!--中心内容E-->
            </div>
        </template>
        <!-- 分类 -->
        <template id="classify">
            <div>
                <!--头部S-->
                <header class="clear_fix">
                    <slot name="back"></slot>
                    <slot name="local_box"></slot>

                    <div class="header_tit">分类</div>
                </header>
                <!--头部E-->
                <!--主体S-->
                <section>
                    <input type="radio" name="type" value="1" id="food" checked="checked" hidden="hidden"/>
                    <input type="radio" name="type" value="1" id="movie" hidden="hidden"/>
                    <input type="radio" name="type" value="1" id="sport" hidden="hidden"/>
                    <input type="radio" name="type" value="1" id="sing" hidden="hidden"/>
                    <div class="lunbo_box">
                        <div class="lunbotu">
                            <ul class="lunbo clear_fix">
                                <li class="lunbo_type fl">
                                    <p><img src="img/classify/classify (1).png"/></p>
                                    <p>美食</p>
                                </li>
                                <li class="lunbo_type fl">
                                    <p><img src="img/classify/classify (1).png"/></p>
                                    <p>美食</p>
                                </li>
                                <li class="lunbo_type fl">
                                    <p><img src="img/classify/classify (1).png"/></p>
                                    <p>美食</p>
                                </li>
                                <li class="lunbo_type fl">
                                    <p><img src="img/classify/classify (1).png"/></p>
                                    <p>美食</p>
                                </li>
                                <li class="lunbo_type fl">
                                    <p><img src="img/classify/classify (4).png"/></p>
                                    <p>电影</p>
                                </li>
                                <li class="lunbo_type fl">
                                    <p><img src="img/classify/classify (4).png"/></p>
                                    <p>电影</p>
                                </li>
                                <li class="lunbo_type fl">
                                    <p><img src="img/classify/classify (4).png"/></p>
                                    <p>电影</p>
                                </li>
                                <li class="lunbo_type fl">
                                    <p><img src="img/classify/classify (4).png"/></p>
                                    <p>电影</p>
                                </li>
                                <li class="lunbo_type fl">
                                    <p><img src="img/classify/classify (3).png"/></p>
                                    <p>运动</p>
                                </li>
                                <li class="lunbo_type fl">
                                    <p><img src="img/classify/classify (3).png"/></p>
                                    <p>运动</p>
                                </li>
                                <li class="lunbo_type fl">
                                    <p><img src="img/classify/classify (3).png"/></p>
                                    <p>运动</p>
                                </li>
                                <li class="lunbo_type fl">
                                    <p><img src="img/classify/classify (3).png"/></p>
                                    <p>运动</p>
                                </li>
                                <li class="lunbo_type fl">
                                    <p><img src="img/classify/classify (2).png"/></p>
                                    <p>唱歌</p>
                                </li>
                                <li class="lunbo_type fl">
                                    <p><img src="img/classify/classify (2).png"/></p>
                                    <p>唱歌</p>
                                </li>
                                <li class="lunbo_type fl">
                                    <p><img src="img/classify/classify (2).png"/></p>
                                    <p>唱歌</p>
                                </li>
                                <li class="lunbo_type fl">
                                    <p><img src="img/classify/classify (2).png"/></p>
                                    <p>唱歌</p>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="control">
                        <label for="food">
                            <i class="iconfont icon-shixinyuan ct_yuan yuan1"></i>
                        </label>
                        <label for="movie">
                            <i class="iconfont icon-shixinyuan ct_yuan yuan2"></i>
                        </label>
                        <label for="sport">
                            <i class="iconfont icon-shixinyuan ct_yuan yuan3"></i>
                        </label>
                        <label for="sing">
                            <i class="iconfont icon-shixinyuan ct_yuan yuan4"></i>
                        </label>
                    </div>
                    <div class="banner clear_fix">
                        <slot name="more_things"></slot>
                        <i class="iconfont icon-meishi banner_hua type_icon"></i>
                        <span>美食类</span>
                    </div>
                    <div class="type_img clear_fix">
                        <div class="img1 fl"><img src="img/classify/foods (1).png"/></div>
                        <div class="img2 fl"><img src="img/classify/foods (2).png"/></div>
                        <div class="img3 fl"><img src="img/classify/foods (3).png"/></div>
                        <div class="img4 fl"><img src="img/classify/foods (4).png"/></div>
                    </div>
                    <div class="banner clear_fix">
                        <slot name="more_things"></slot>
                        <i class="iconfont icon-yundongyuan banner_hua type_icon"></i>
                        <span>运动类</span>
                    </div>
                    <div class="type_img clear_fix">
                        <div class="img1 fl"><img src="img/classify/soprt (1).png"/></div>
                        <div class="img2 fl"><img src="img/classify/soprt (2).png"/></div>
                        <div class="img3 fl"><img src="img/classify/soprt (3).png"/></div>
                        <div class="img4 fl"><img src="img/classify/soprt (4).png"/></div>
                    </div>
                    <div class="banner clear_fix">
                        <slot name="more_things"></slot>
                        <i class="iconfont icon-dianying banner_hua type_icon"></i>
                        <span>电影类</span>
                    </div>
                    <div class="type_img clear_fix">
                        <div class="img1 fl"><img src="img/classify/movie (1).png"/></div>
                        <div class="img2 fl"><img src="img/classify/movie (1).png"/></div>
                        <div class="img3 fl"><img src="img/classify/movie (2).png"/></div>
                        <div class="img4 fl"><img src="img/classify/movie (2).png"/></div>
                    </div>

                </section>
                <!--主体E-->
            </div>
        </template>
        <!-- 发现 -->
        <template id="discover">
            <div>
                <!--头部S-->
                <header class="clear_fix">
                    <slot name="back"></slot>
                    <slot name="local_box"></slot>
                    <div class="header_tit">发现</div>
                    <slot name="search"></slot>
                </header>
                <!--头部E-->
                <!--主体S-->
                <section>
                    <!--搜索详细S-->
                    <p class="banner_text">大家都在搜</p>
                    <p class="search_end">
                        <a href="">
                            <span>寿司</span></a>
                        <a href="">
                            <span>羽毛球</span></a>
                        <a href="">
                            <span>火锅</span></a>
                        <a href="">
                            <span>游泳馆</span></a>
                    </p>
                    <p class="search_end">
                        <a href="">
                            <span>电影</span></a>
                        <a href="">
                            <span>周黑鸭</span></a>
                        <a href="">
                            <span>KTV</span></a>
                        <a href="">
                            <span>肯德基</span></a>
                    </p>
                    <!--搜索详细E-->

                    <!--横幅S-->
                    <div class="banner clear_fix">
                        <slot name="more_things"></slot>
                        <i class="iconfont icon-huo banner_hua"></i>
                        <span>热门搜索</span>
                    </div>
                    <!--横幅E-->
                    <!--热门S-->
                    <div class="hot_search clear_fix">
                        <div class="hot_left fl"><img src="img/discover/hot_search (4).png"/></div>
                        <div class="hot_right">
                            <div class="hot_long"><img src="img/discover/hot_search (3).png"/></div>
                            <div class="hot_twins clear_fix">
                                <div class="twins1 fl"><img src="img/discover/hot_search (2).png"/></div>
                                <div class="twins2 fl"><img src="img/discover/hot_search (1).png"/></div>
                            </div>
                        </div>
                    </div>
                    <!--热门E-->

                    <!--横幅S-->
                    <div class="banner clear_fix">
                        <slot name="more_things"></slot>
                        <i class="iconfont icon-star banner_hua"></i>
                        <span>推荐搜索</span>
                    </div>
                    <!--横幅E-->
                    <!--推荐S-->
                    <div class="recom">
                        <div class="rec_left fl"><img src="img/discover/recommend (3).png"/></div>
                        <div class="rec_right fr"><img src="img/discover/recommend (1).png"/></div>
                        <div class="rec_center"><img src="img/discover/recommend (2).png"/></div>
                    </div>
                    <!--推荐E-->

                </section>
                <!--主体E-->
            </div>
        </template>
        <!-- 个人主页 -->
        <template id="personal">
            <div>
                <!--头部S-->
                <header class="clear_fix">
                    <slot name="back"></slot>
                    <div class="header_email fr">
                        <button>
                            <i class="iconfont icon-xinfeng email_icon"></i>
                        </button>
                    </div>
                    <div class="header_tit">分类</div>
                </header>
                <!--头部E-->
                <!--主体S-->
                <section>
                    <div class="section_photo clear_fix">
                        <div class="photo_img fl"><img src="img/personal/wode1.png"/></div>
                        <div class="photo_right fr">
                            <a href="">&gt;</a>
                        </div>
                        <div class="photo_login">
                            <p>
                                <a href="">点击登陆</a>
                            </p>
                            <p>常居地未设置</p>
                        </div>
                    </div>
                    <div class="func_button">
                        <button class="for_mine1">
                            <i class="iconfont icon-dianping button_icon"></i>
                            <p>我的点评</p>
                        </button>
                        <button class="for_mine2">
                            <i class="iconfont icon-star button_icon"></i>
                            <p>我的收藏</p>
                        </button>
                        <button class="for_mine3">
                            <i class="iconfont icon-youhuiquan button_icon"></i>
                            <p>我的优惠券</p>
                        </button>
                    </div>
                    <div class="banner clear_fix">
                        <slot name="more_things"></slot>
                        <i class="iconfont icon-qianbao banner_hua"></i>
                        <span class="personal_more">我的钱包</span>
                    </div>
                    <div class="banner clear_fix">
                        <!-- 插槽 -->
                        <slot name="more_things"></slot>
                        <i class="iconfont icon-dianping banner_hua"></i>
                        <span class="personal_more">待点评</span>
                    </div>
                    <div class="banner clear_fix">
                        <!-- 插槽 -->
                        <slot name="more_things"></slot>
                        <i class="iconfont icon-diqiu banner_hua"></i>
                        <span class="personal_more">找好友</span>
                    </div>
                    <div class="banner clear_fix">
                        <!-- 插槽 -->
                        <slot name="more_things"></slot>
                        <i class="iconfont icon-zuji banner_hua"></i>
                        <span class="personal_more">我的足迹</span>
                    </div>
                    <div class="banner setting clear_fix">
                        <!-- 插槽 -->
                        <slot name="more_things"></slot>
                        <i class="iconfont icon-gongju banner_hua"></i>
                        <span class="personal_more">设置</span>
                    </div>
                    <div class="banner  clear_fix">
                        <!-- 插槽 -->
                        <slot name="more_things"></slot>
                        <i class="iconfont icon-dianhua banner_hua"></i>
                        <span class="personal_more connect">联系</span>
                    </div>
                    <div class="bottom_button">
                        <button class="button_getout">退出</button>
                        <button class="button_loginout">注销</button>

                    </div>
                </section>
                <!--主体E-->

            </div>
        </template>

        <!-- 产品 -->
        <template id="detail_page">
            <div>
                <!--头部S-->
                <header class="clear_fix">
                    <slot name="back"></slot>
                    <div class="header_star fr">
                        <i class="iconfont icon-star star_icon"></i>
                    </div>
                    <div class="header_tit">产品详细</div>
                </header>
                <!--头部E-->
                <!--mainS-->
                <section>
                    <div class="details_kv">
                        <img src="img/details/banner.png"/>
                    </div>
                    <div class="price">
                        <span>￥</span><span>32</span>
                        <button>购买</button>
                    </div>
                    <div class="rate">
                        <i class="iconfont icon-star little_star"></i>
                        <span>好评度</span>
                        <span class="rate_num">99%</span>
                        <a href="">共605个评价&gt;</a>
                    </div>
                    <div class="fit">
                        <span>适应商户</span>
                        <span>&gt;</span>
                    </div>

                    <div class="store_list clear_fix">
                        <div class="store_img fl">
                            <div class="img_cover">
                                正佳店
                            </div>
                        </div>
                        <div class="store_button fr">
                            <button>进入</button>
                        </div>
                        <div class="store_name">
                            <p>万岁寿司（正佳店）</p>
                            <p>
                                <i class="iconfont icon-star little_star"></i>
                                <i class="iconfont icon-star little_star"></i>
                                <i class="iconfont icon-star little_star"></i>
                                <i class="iconfont icon-star little_star"></i>
                                <i class="iconfont icon-star little_star"></i>
                                <span>10分</span></p>
                            <p>离你100m</p>
                            <p>
                                <a href="">查看详情&gt;&gt;</a>
                            </p>
                        </div>
                    </div>
                    <div class="store_list clear_fix">
                        <div class="store_img bc_img1 fl">
                            <div class="img_cover">
                                体育西店
                            </div>
                        </div>
                        <div class="store_button fr">
                            <button>进入</button>
                        </div>
                        <div class="store_name">
                            <p>万岁寿司（体育西店）</p>
                            <p>
                                <i class="iconfont icon-star little_star"></i>
                                <i class="iconfont icon-star little_star"></i>
                                <i class="iconfont icon-star little_star"></i>
                                <i class="iconfont icon-star little_star"></i>
                                <i class="iconfont icon-star little_star"></i>
                                <span>10分</span></p>
                            <p>离你100m</p>
                            <p>
                                <a href="">查看详情&gt;&gt;</a>
                            </p>
                        </div>
                    </div>
                    <div class="store_list  clear_fix">
                        <div class="store_img bc_img2 fl">
                            <div class="img_cover">
                                昌岗店
                            </div>
                        </div>
                        <div class="store_button fr">
                            <button>进入</button>
                        </div>
                        <div class="store_name">
                            <p>万岁寿司（昌岗店）</p>
                            <p>
                                <i class="iconfont icon-star little_star"></i>
                                <i class="iconfont icon-star little_star"></i>
                                <i class="iconfont icon-star little_star"></i>
                                <i class="iconfont icon-star little_star"></i>
                                <i class="iconfont icon-star little_star"></i>
                                <span>10分</span></p>
                            <p>离你100m</p>
                            <p>
                                <a href="">查看详情&gt;&gt;</a>
                            </p>
                        </div>
                    </div>

                </section>
                <!--mainE-->
            </div>
        </template>
        <script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/vue.js" charset="utf-8"></script>
        <script src="js/VueIndex.js" charset="utf-8"></script>
    </body>

</html>
